<template>
	<view class="base-function-nav-bar">
		<view
			:style="{
				height: navHeight.height + 'px'
			}"
		></view>
		<view class="function-nav-bar" :style="{ opacity: opacity }">
			<view :style="{ height: navHeight.navigationCustomStatusHeight + 'px' }"></view>
			<view
				class="function-nav-title"
				:style="{ height: navHeight.navigationCustomCapsuleHeight + 'px' }"
			>
				<view class="flex ac" style="width: 75rpx;" :style="{flex: titleCenter ?'1 1 auto': '0 0 auto'}">
					<view v-if="!notBack" class="flex ac" style="flex-shrink: 0;">
						<block v-if='!hideBackIcon'>
							<view v-if="!share" style="padding-right: 40rpx;" @click="back()">
								<text class="iconfont icon-fanhui"></text>
							</view>
							<view v-else style="padding-right: 40rpx;" @click="back(1)">
								<u-icon name="home" color="#333" size="22" ></u-icon>
								<!-- <image
									class="icon-back-home"
									src="/static/image/return-Home.png"
									mode="widthFix"
								></image> -->
							</view>
						</block>
					</view>
					<slot v-if="defaultTitle"></slot>
					<view v-else class="bold title-text-omit" :class="{'title-center':titleCenter}">{{ title ? title : "" }}</view>
				</view>
				<view class="flex ac" style="flex-shrink: 0;" v-if="!notShowFunction">
					<image
						@click="$emit('search')"
						class="function-icon"
						src="/static/image/icon_search.png"
						mode="widthFix"
					></image>
				</view>
			</view>
		</view>
		<view class="function-nav-bar-simple" :style="{ opacity: opacity == 1 ? 0 : 1 }">
			<view :style="{ height: navHeight.navigationCustomStatusHeight + 'px' }"></view>
			<view
				class="function-nav-title"
				:style="{ height: navHeight.navigationCustomCapsuleHeight + 'px' }"
			>
				<view class="flex ac" style="width: 75rpx;">
					<block v-if='!hideBackIcon'>
						<image
							v-if="share"
							@click="back(1)"
							class="icon-back-white-home"
							src="/static/image/return-home-w.png"
							mode="widthFix"
						></image>
						<view v-else class="back-con flex ac jc">
							<image
								@click="back()"
								class="icon-back-white"
								src="/static/image/return.png"
								mode="widthFix"
							></image>
						</view>
					</block>
				</view>
				<view class="flex ac" v-if="!notShowFunction">
					<image
						@click="$emit('search')"
						class="function-icon"
						src="/static/image/icon_search1.png"
						mode="widthFix"
					></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { computesNavHeight } from "@/utils/util.js";
export default {
	name: "base-function-nav-bar",
	props: ["title", "opacity", "share", "notShowFunction", "defaultTitle","notBack","titleCenter"],
	data() {
		return {
			navHeight: "",
			hideBackIcon: false
		};
	},
	computed: {
		systemInfo() {
			return this.$store.state.system.infos;
		}
	},
	mounted() {
		this.hideBackIcon = this.systemInfo.hideBackIcon
		this.navHeight = computesNavHeight();
		this.navHeight.height =
			this.navHeight.navigationCustomCapsuleHeight + this.navHeight.navigationCustomStatusHeight;
	},
	methods: {
		back(type) {
			if (type == 1)
				uni.switchTab({
					url: "/pages/index/index"
				});
			else uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.function-nav-bar,
.function-nav-bar-simple {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 11;
	transition: opacity 0.5s;
}
.function-nav-bar {
	background: #fff;
}
.function-nav-bar-simple {
	z-index: 10;
	background: transparent;
}
.function-nav-title {
	display: flex;
	align-items: center;
	padding: 0 220rpx 0 32rpx;
	justify-content: space-between;
	transform: translateY(-2rpx);
}
.icon-back {
	width: 20rpx;
	height: 20rpx;

	transform: translateY(2rpx);
}
.icon-back-white {
	width: 36rpx;
	height: 36rpx;
}
.icon-back-white-home {
	width: 42rpx;
	height: 42rpx;
	margin-right: 40rpx;
	transform: translate(-4rpx, 2rpx);
}
.function-icon {
	width: 48rpx;
	height: 48rpx;
	/* transform: translateY(2rpx); */
}
.back-con {
	width: 60rpx;
	height: 60rpx;
	margin-left: -16rpx;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 30rpx;
}
.title-text-omit {
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	flex: 1 0 auto;
}
.title-center {
	text-align: center;
	transform: translateX(32rpx);
}
</style>
